<div ng-controller="NavbarCtrl" ng-if="currentUser && currentUser.userId">
  <nav class="navbar topbar" role="navigation">
    <div class="navbar-header">
      <button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="fa fa-navicon" ng-bind="topbar.title"></span>
      </button>
      <a class="navbar-brand" ui-sref="{{logo.link}}" ng-bind="logo.text"></a>
    </div>
    <ul class="nav navbar-nav navbar-right navbar-top-links hidden-xs">
      <li class="dropdown">
        <a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle count-info">
          <i class="fa fa-bell-o"></i><span class="badge badge-primary" ng-bind="topbar.messages.total"></span>
        </a>
        <ul class="dropdown-menu dropdown-alerts">
          <li ng-repeat="msg in topbar.messages.list">
            <a ui-sref="{{msg.link}}">
              <div>
                <i class="fa-fw {{msg.icon}}"></i>
                {{msg.text}}
                <span class="pull-right small" ng-bind="msg.time"></span>
              </div>
            </a>
          </li>
          <li>
            <a ui-sref="{{topbar.messages.more.link}}">
              <div class="text-center">
                <strong>{{topbar.messages.more.text}} </strong><i class="{{topbar.messages.more.icon}}"></i>
              </div>
            </a>
          </li>
        </ul>
      </li>

      <li class="dropdown">
        <a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
          <i class="glyphicon glyphicon-tasks"></i>
        </a>
        <ul class="dropdown-menu">
          <li ng-repeat="item in topbar.setting">
            <a ui-sref="{{item.link}}"><i class="fa-fw {{item.icon}}"></i>{{item.text}}</a>
          </li>
        </ul>
      </li>

      <li class="dropdown user-profile">
        <a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
          <img alt="Profiles" ng-if="currentUser.icon" ng-src="{{currentUser.icon}}?w=40" onerror="this.src='images/avator.jpg'" width="40" height="40">
          <img alt="Profiles" ng-if="!currentUser.icon" ng-src="{{defaultProfile}}" width="40" height="40">
        </a>
        <ul class="dropdown-menu">
          <li ng-if="currentUser" class="user-profile blue-bg">
            <p style="display:inline-block;margin:0;padding:3px 10px;height:35px;line-height: 35px;font-size: 14px;">
              <img alt="Profiles" ng-if="currentUser.icon" ng-src="{{currentUser.icon}}?w=40" onerror="this.src='images/avator.jpg'" width="40" height="40">
              <img alt="Profiles" ng-if="!currentUser.icon" ng-src="{{defaultProfile}}" width="40" height="40">&nbsp;&nbsp;
              <span ng-bind="currentUser.userName"></span>
            </p>
          </li>
          <li ng-repeat="item in topbar.user">
            <a ng-if="item.link" ui-sref="{{item.link}}"><i class="fa-fw {{item.icon}}"></i>{{item.text}}</a>
            <a ng-if="item.trigger=='logOff'" href="javascript:void(0)" ng-click="logOff()"><i class="fa-fw {{item.icon}}"></i>{{item.text}}</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ng-repeat="item in navbar" class="dropdown">
          <a ui-sref="{{item.link}}" ng-if="item.link" ng-show="showMenu(item)" class="dropdown-toggle" data-toggle="dropdown" ui-sref-active="active">
            <i class="{{item.icon}}" ng-if="item.icon"></i>&nbsp;{{item.label}} <b class="caret" ng-show="item.children.length>0"></b>
          </a>
          <a ng-if="!item.link" class="dropdown-toggle" data-toggle="dropdown" ng-show="showMenu(item)">
            <i class="{{item.icon}}" ng-if="item.icon"></i>&nbsp;{{item.label}} <b class="caret" ng-show="item.children.length>0"></b>
          </a>

          <dl class="dropdown-menu menu-top gridnav" ng-if="item.style=='grid'">
            <dt ng-repeat="griditem in item.children" ng-include="'tpls/gridmenu.html'">
            </dt>
          </dl>
          <ul class="dropdown-menu menu-top" ng-if="item.style!='grid'">
            <li ng-repeat="subItem in item.children" class="dropdown-submenu">
              <a ui-sref="{{subItem.link}}" ng-if="subItem.link" tab-index="-1">
                <i class="{{subItem.icon}}" ng-if="subItem.icon"></i>&nbsp;{{subItem.label}}
              </a>
              <a ng-if="!subItem.link" tab-index="-1">
                <i class="{{subItem.icon}}" ng-if="subItem.icon"></i>&nbsp;{{subItem.label}}
              </a>
              <ul ng-show="subItem.children.length>0" class="dropdown-menu">
                <li ng-repeat="node in subItem.children">
                  <a ui-sref="{{node.link}}" ng-if="node.link"><i class="{{node.icon}}" ng-if="node.icon"></i>&nbsp;{{node.label}}</a>
                  <a ng-if="!node.link"><i class="{{node.icon}}" ng-if="node.icon"></i>&nbsp;{{node.label}}</a>
                </li>
              </ul>
            </li>
          </ul>

        </li>
      </ul>
    </div>
  </nav>
</div>